<template>
  <transition name="compare">
    <div :class="['item', { bg: index % 2 }]">
      <img :src="baseUrl + item.item.src" alt="">
      <h3>{{ item.item.title }}</h3>
      <p>{{ item.item.year }}</p>
      <p>{{ item.item.region }}</p>
      <p>{{ item.item.varietal }}</p>
      <p>{{ item.item.alcohol }}</p>
      <p class="price">{{ item.item.price }}</p>
      <a href="javascript:;">
        <i><svg t="1748867463853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4929" data-spm-anchor-id="a313x.search_index.0.i7.44ac3a81y7Xl3y" width="200" height="200"><path d="M864.234539 486.29576l91.521277-222.162012c12.048862-30.593277-5.045397-55.576016-38.270212-55.576016L331.444886 208.557733l-4.89517-34.360208c-5.876248-28.974499-32.498204-50.540838-62.245301-50.540838L109.482156 123.656687C84.575042 123.656687 64.383234 143.718707 64.383234 168.465373s20.191808 44.808687 45.098922 44.808687l132.97897 0 85.976144 423.97279c-55.642443 16.676279-96.184463 67.946794-96.184463 128.669381 0 74.241022 60.574403 134.42606 135.297788 134.42606 74.722363 0 135.297788-60.185038 135.297788-134.42606 0-16.61905-3.179305-32.466523-8.729549-47.159186L676.698443 718.757046c-5.550244 14.692663-8.729549 30.540136-8.729549 47.159186 0 74.241022 60.574403 134.42606 135.297788 134.42606 74.722363 0 135.297788-60.185038 135.297788-134.42606 0-69.046419-52.418172-125.865134-119.858076-133.488926-5.199713-2.078659-10.848064-3.287633-16.795848-3.287633L418.80578 629.139673l-17.697214-87.267896 381.150786 0C815.322699 541.872798 852.146842 516.990212 864.234539 486.29576zM803.266683 810.72594c-24.908136 0-45.098922-20.060998-45.098922-44.808687s20.191808-44.808687 45.098922-44.808687c24.908136 0 45.098922 20.06202 45.098922 44.808687S828.174818 810.72594 803.266683 810.72594zM412.650539 765.917253c0 24.747689-20.19283 44.808687-45.098922 44.808687-24.908136 0-45.098922-20.060998-45.098922-44.808687s20.191808-44.808687 45.098922-44.808687C392.457709 721.107545 412.650539 741.169565 412.650539 765.917253z" p-id="4930" fill="#ffffff"></path></svg></i>
        <span>Add to cart</span>
      </a>
    </div>
  </transition>
</template>

<script>
export default {
  props: ['item', 'baseUrl', 'index']
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #eee;
  justify-content: space-evenly;
  background: #232529;

  p {
    color: #ccc;
  }

  .price {
    color: #eee;
    font-weight: 600;
  }
}

.bg {
  background: #202226;
}

a {
  font-weight: 600;
  font-size: 0.18rem;
  color: #fff;
  height: 0.6rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: #2a2c33;

  i {
    display: flex;
    align-items: center;
  }

  svg {
    width: 0.3rem;
    height: 0.3rem;
  }
}
</style>
